<template>
  <div>
    <!-- 过滤器: 把{{}}中的值进行处理, 返回新的值 -->
    <!-- abs: 绝对值 -->
    <div>{{ 9 | abs }}</div>
    <div>{{ -9 | abs }}</div>
    <div>{{ 9 | sqrt }}</div>
    <!-- 双倍 -->
    <div>{{ 9 | double }}</div>
    <!-- 求次幂 -->
    <div>{{ 2 | pow(2) }}</div>
    <div>{{ 2 | pow(10) }}</div>
    <!-- 过滤器可以顺序使用 -->
    <div>{{ -2 | abs | double | pow(5) }}</div>
  </div>
</template>

<script>
export default {
  // filters： 用于存放过滤器， 配合 {{ value | 过滤器 }} 语法
  filters: {
    // {{ x | pow(y) }}
    pow(x, y) {
      return Math.pow(x, y);
    },
    double(value) {
      return value * 2;
    },
    // {{ value | abs}}
    abs(value) {
      return value > 0 ? value : -value;
    },
    sqrt(value) {
      return Math.sqrt(value);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>